<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>常志康</title>
		<style type="text/css">
			.beijng{
				background-size: contain ;
				width: 1440px;height: 800px;
				background-image: url(img/beijing.png);
			}
			.lan{
				position: absolute;
				width: 120px;height: 93px;
				font-size: 50px;
				text-align: center;
				line-height: 100px;
		background-image: url(img/ShuP.png);
			}
			.top{
				height: 550px;
			/*	border: 1px solid #ff0000;*/
				overflow: hidden;
				position: relative;
			}
			.kaishi{
				width: 80px;
				height:50px;
				position: absolute;
				/*border: 1px solid crimson;*/
				left: 240px;
				top: 98px;
				border-radius: 50%;
				cursor: pointer;
			}
			.zanting{
				width: 50px;
				height: 80px;
				position: absolute;
				/*border: 1px solid crimson;*/
				left: 305px;
				top: 25px;
				border-radius: 50%;
				cursor: pointer;
			}
			.jieshu{
				width: 80px;
				height: 50px;
				position: absolute;
				/*border: 1px solid crimson;*/
				left: 340px;
				top: 95px;
				border-radius: 50%;
				cursor: pointer;
			}
			.tuichu{
				width: 90px;
				height: 55px;
				position: absolute;
				/*border: 1px solid crimson;*/
				left:0;
				top: 130px;
				cursor: pointer;
			}
			.text{
				font-size: 25px;
				font-weight: bold;
				color: saddlebrown;
				font-family: "楷体"
			}
		</style>
	</head>
	<body>
		<div class="beijng">
			
			<div  class="top">
			
			</div>
			<div class="botton">
			<table style="position: relative;"width="1440px"height="250px">
				<tr>
					<td width="600px">
						<div class="kaishi" onclick="kaishi()"></div>
						<div class="zanting"onclick="zanting()"></div>
						<div class="jieshu" onclick="jieshu()"></div>
						<div class="tuichu" onclick="tuichu() "></div>
					</td>
					<td width="400px">
						<div class="text" id="zql">正确率：<span>100%</span></div>
						<div class="text" id="time">时间：<span>00:00:00</span></div>
						<div class="text" id="sl">速率：<span>0个/分钟</span></div>
					</td>
					<td></td>
				</tr>
				
			</table>
		
		</div>
		</div>
		<script type="text/javascript">
//			
			var t=0;
			var createLAN=0;
			var time=0;
			var timeid=0;
			var sum=0;
			var count=0;
			var n=0;
			function jieshu(){
				zanting()
				var divtop=document.querySelector(".top");
				divtop.innerHTML="";
				time=0;
				sum=0;
				count=0;
				n=0;
				document.querySelector("#time").innerHTML="时间：00:00:00";
				document.querySelector("#zql").innerHTML="正确率：100%";
				document.querySelector("#sl").innerHTML="速率：0个/分钟";
			}
			function zanting(){
				clearInterval(t);
				clearInterval(createLAN);
				clearInterval(timeid)
				t=0;
			}
			function tuichu(){
				window.close();
			}
			window.onkeydown=function(event){
				if (t!=0) {
				var divtop=document.querySelector(".top");
				for(var i=0;i<divtop.children.length;i++){
				var k= divtop.children[i].getAttribute("key");
				if (k==event.keyCode) {
					divtop.removeChild(divtop.children[i]);
					n++
					break;	
				}
			   }
				
			  }
			}
			function kaishi(){
				if(t==0){
					t=setInterval(function(){
						var top=document.querySelector(".top");
						for(var i=0;i<top.children.length;i++){
							var lan=top.children[i];
						var x=parseInt(lan.style.top)+parseInt(lan.getAttribute("sudu"));
						lan.style.top=x+"px"
						if (x>450) {
							top.removeChild(top.children[i]);
							count++;
							
						}
                       document.querySelector("#zql").innerHTML="正确率"+":"+parseInt((1-count/sum)*100)+"%";
//						
						}
//					
						
					},33);
					createLAN= setInterval(function(){
						var div=document.createElement("div");
						div.className="lan";
						div.style.left=parseInt(Math.random()*1340)+"px";
						div.style.top="-102px";
						var ch=parseInt(Math.random()*26)+65;
						div.setAttribute("key",ch);
						div.setAttribute("sudu",parseInt(Math.random()*5)+1);
						div.innerHTML="&#"+ch+";";
						document.querySelector(".top").appendChild(div);
						sum++;
						document.querySelector("#sl").innerHTML="速率"+":"+parseInt((n/time)*60)+"个/分钟";
					},2000)
					timeid=  setInterval(function(){
						time++;
						var ss=time%60;
						ss=ss<10?"0"+ss:ss;
						var mm=parseInt(time/60)%60;
						mm=mm<10?"0"+mm:mm;
						var hh=parseInt(time/3600);
						hh=hh<10?"0"+hh:hh;
						var divtime=document.querySelector("#time");
						divtime.innerHTML="时间："+hh+"："+mm+"："+ss;
					},1000)
				}
			}
//			setInterval(function(){
//				t+=30;
//				lan.style.top=t+"px";
//			},500)
		</script>
	</body>
</html>
